<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box">你好啊 赛丽亚</div>
  <script>
      // es6 箭头函数 简写
      // 区别1 ：箭头函数 都是匿名函数
      // let say=function(){}
      // setTimeout(function () {  },2000)
      // [1,2,3].forEach(function(){})
      // 2箭头函数基本写法 (形参，形参)=>{ 函数体 }
     let run=function(name,km){
        console.log("运行了函数")
        return `${name}跑了${km}`
     }  
     let runs=(name,km)=>{
         console.log("运行了函数")
        return `${name}跑了${km}`
     }
     runs("小王","10km");
    //  2) 函数形参只有一个 可以省略()
          // 函数只有一句代码，或一个返回值的时候 可以省略{}

     let eat=function(food){
        console.log(food)
      
     }
     let eats=food => console.log("food")
    //  没有形参的时候 不能省略()
     let kk=function(){
      return "你好"
     }
     let kks=()=>"你好"

  let karr=[1,2,3].map(item=>item*2)
     console.log(karr)
    //    区别：2. 箭头函数无法当成构造函数使用
    function car(name) {
        this.name=name;
    }
      let car1=new car()
    // 区别3： 箭头函数没有自己的this指向，继承父级环境的this指向
    let hr=function () { 

        console.log(this) //window
     }

     let hrs=()=>{
          console.log(this) //window
     }
      hrs()
     let box=document.getElementById("box")
     box.onclick=function(){
      // this----box
      let hrs=()=>{
        console.log(this)
      }
      hrs()
     }
     var myname="李思"
     console.log(myname)
     let obj={
      myname:"张三",
      age:18,
      eat:function(){
     
          // setTimeout(function () {  
          //   console.log(this.myname) //李思
          // },2000);
          setTimeout(()=>{
              console.log(this.myname)  //张三
          },2000);
      }
     }
     obj.eat();
    //  区别4： 箭头函数不能使用arguments 
    // let ss=()=>{
    //   console.log(arguments)
    // }
    // ss(1,"你好",3,4,true)
      let ms=(...rest)=>{
        console.log(rest)
      }
      ms(1,2,3,4,5)
   

  </script>
</body>
</html>